import React from 'react';
import { Table, Tabs } from 'antd';
import moment from 'moment';
import './OperationRecord.less'

const TabPane = Tabs.TabPane;

function OperationType(props) {
  const type = props.type
  switch (type) {
    case 0:
      return 'Create'
    case 1:
      return 'Edit'
    case 2:
      return 'Approving'
    case 3:
      return 'Approve'
    case 4:
      return 'Reject'
    case 5:
      return 'Online'
    case 6:
      return 'Offline'
    case 7:
      return 'Top'
    case 8:
      return 'Revoke'
    case 9:
      return 'Reapprove'
    case 10:
      return 'Remove'
    default:
      return null
  }
}

const columns = [{
  title: 'Account',
  dataIndex: 'userName',
  key: 'userName',
}, {
  title: 'Type',
  render: (text, record) => (
    <OperationType type={record.eventType} />
  )
}, {
  title: 'Time',
  render: (text, record) => (
    <div>{moment(record.gmtModified).format('YYYY-MM-DD MM:ss')}</div>
  )
}];

const OperationRecord = (props) => (
  <div className="operation-record mt20">
    <Tabs defaultActiveKey="1">
      <TabPane tab="Operation Record" key="1"></TabPane>
    </Tabs>
    <Table
      rowKey="index"
      dataSource={props.operationRecord}
      columns={columns}
      pagination={false} />
  </div>
)

export default OperationRecord;
